<template>
  <view
      class="chat-scroll-view"
      :style="{height}"
      id="chatScrollView">

    <view>
      <u-subsection
          :activeColor="'#000000'"
          :fontSize="'28rpx'"
          :bgColor="'rgba(0,0,0,0)'"
          :list="subsectionList" :current="getListIndexByCode(subsectionCurrent)" @change="sectionChange"></u-subsection>
      <view style="height: 20rpx"></view>
      <view class="input-box">
        <image
            class="input-box-icon"
        :src="$kt.file.byPath('icon/search.svg')"
        ></image>
        <input
            :adjust-position="false"
            clearable
        v-model="keyword"
        class="input-box-input"
        :placeholder="$i18n.zhToGlobal('搜索')"
        />
        <image
            v-if="keyword"
            @click="keyword = ''"
            class="input-box-icon-clear"
            :src="$kt.file.byPath('icon/clear.svg')"
        ></image>

      </view>

    </view>
    <view style="height: 30rpx"></view>
    <kt-scroll-view
        ref="scrollView"
        :height="'calc(' + height + ' - ' + '150rpx)'"
        @scrolltoupper="scrolltoupper"
        @scrolltolower="scrolltolower"
    >
      <view>
          <view
              v-if="userAccountId"
              class="box">
            <followed-list
                @select="select"
                ref="list"
                :keyword="keyword"
              v-if="subsectionCurrent === 'followed'"
              :userAccountId="userAccountId"
            ></followed-list>
            <follower-list
                @select="select"
                ref="list"
                :keyword="keyword"
                v-if="subsectionCurrent === 'follow'"
                :userAccountId="userAccountId"
            ></follower-list>
            <mutual-follow-list
                @select="select"
              ref="list"
              :keyword="keyword"
              v-if="subsectionCurrent === 'mutualFollow'"
              :userAccountId="userAccountId"
            ></mutual-follow-list>
          </view>
      </view>
    </kt-scroll-view>
  </view>
</template>

<script>
import FollowedList from "./components/followed-list.vue";
import FollowerList from "./components/follower-list.vue";
import MutualFollowList from "./components/mutual-follow-list.vue";
import UserInfoCard from "../user-info-card/user-info-card.vue";

export default {
  components: {UserInfoCard, MutualFollowList, FollowedList, FollowerList},
  props: {
    height: {
      type: String,
      default: ''
    },
    userAccountId: {
      type: String || Number,
      default: ''
    },
    initCode: {
      type: String,
      default: 'mutualFollow'
    }
  },
  data() {
    return {
      keyword: '',
      subsectionList: [
        {
          code:"mutualFollow",
          name: this.$i18n.zhToGlobal('好友')
        },
        {
          code:"follow",
          name: this.$i18n.zhToGlobal('关注的人')
        },
        {
          code:"followed",
          name: this.$i18n.zhToGlobal('粉丝')
        },
      ],
      subsectionCurrent: "mutualFollow",

    };
  },
  watch: {
    initCode: {
      handler(val) {
        this.selectSubsection(val);
      }
    },
  },
  created() {
    if(this.initCode){
      console.log(this.initCode,"初始化的code");
      this.selectSubsection(this.initCode);
    }
  },
  mounted() {
  },
  methods: {
    select(userAccount) {
      this.$emit('select', userAccount);
    },
    selectSubsection(code) {
      this.subsectionCurrent = code;
    },
    getCodeByListIndex(index) {
      if (index < 0 || index >= this.subsectionList.length) {
        return null;
      }
      return this.subsectionList[index].code;
    },
    getListIndexByCode(code) {
      for (let i = 0; i < this.subsectionList.length; i++) {
        if (this.subsectionList[i].code === code) {
          return i;
        }
      }
      return -1;
    },
    scrolltoupper() {
      console.log("scrolltoupper");
    },
    scrolltolower() {
      console.log("scrolltolower");
    },
    sectionChange(e) {
      this.subsectionCurrent = this.getCodeByListIndex(e);
      console.log(this.subsectionCurrent);
    }
  }
}
</script>

<style lang="scss" scoped>
.loading-icon-2{
  width: 100px;
  height: 100px;
}

.box{
  padding: 20rpx;
  box-sizing: border-box;
}

.input-box{
  position: relative;
  background-color: #f8f8f8;
  padding: 10rpx;
  border-radius: 10rpx;

  .input-box-icon{
    position: absolute;
    width: 30rpx;
    height: 30rpx;
    left: 20rpx;
    top: 50%;
    transform: translateY(-50%);
  }

  .input-box-input{
    display: inline-block;
    width: calc(100% - 100rpx);
    margin-left: 60rpx;
  }

  .input-box-icon-clear{
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    right: 20rpx;
    top: 50%;
    opacity: .2;
    transform: translateY(-50%);
    z-index: 1;
  }

}

</style>
